<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>交叉轴上的单行对齐</title>
    <link rel="stylesheet" type="text/css" href="./css//main.css">
</head>

<body>
    <div>
        <p>
            flex : 交叉轴上的单行对齐<br>
            在多行情况下，这个属性失效
            <pre>
            align-items: stretch|flex-start|flex-end|center|baseline
            </pre>
            <ul style="list-style-type: none">
                <li>stretch:默认值,当元素没有设置具体尺寸时会将容器在交叉轴方向撑满</li>
                <li>flex-start:项目沿交叉轴的起点对齐</li>
                <li>flex-end:项目沿交叉轴的终点对齐</li>
                <li>center：项目沿交叉轴的中电对齐</li>
                <li>baseline：元素位于容器的基线上，如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐</li>
            </ul>
        </p>
    </div>
    <div>
        <p>align-items:stretch</p>
        <p>默认值,<br>当元素没有设置具体尺寸时<br>会将容器在交叉轴方向撑满</p>
        <div class="container stretch">
            <div>aaaa</div>
            <div>bbbb</div>
            <div>cccc</div>
        </div>
    </div>
    <div>
        <p>align-items:flex-start</p>
        <p><br><br><br></p>
        <div class="container flex-start">
            <div>aaaa</div>
            <div>bbbb</div>
            <div>cccc</div>
        </div>
    </div>
    <div>
        <p>align-items:flex-end</p>
        <p><br><br><br></p>
        <div class="container flex-end">
            <div>aaaa</div>
            <div>bbbb</div>
            <div>cccc</div>
        </div>
    </div>
    <div>
        <p>align-items:center</p>
        <p><br><br><br></p>
        <div class="container center">
            <div>aaaa</div>
            <div>bbbb</div>
            <div>cccc</div>
        </div>
    </div>
    <div>
        <p>align-items:baseline</p>
        <p><br><br><br></p>
        <div class="container baseline">
            <div>aaaa</div>
            <div>bbbb</div>
            <div>cccc</div>
        </div>
    </div>
</body>
<style>
    .container {
        display: flex;
        width: 200px;
        height: 200px;
        background-color: aqua;
    }

    .stretch {
        align-items: stretch;
    }

    .container div {
        background-color: chocolate;
        border: 1px solid salmon;
    }

    .flex-start {
        align-items: flex-start;
    }

    .flex-end {
        align-items: flex-end;
    }

    .center {
        align-items: center;
    }

    .baseline {
        align-items: baseline;
    }

    .flex-start div,
    .flex-end div,
    .center div,
    .baseline div {
        width: 50px;
        height: 50px;
        background-color: chocolate;
    }
</style>

</html>